<!-- 电商 -->
<template>
    <div class="allbuju">
        <Top/>

        <!--具体内容-->
    <div id="neirong">
        <!--外卖or电商-->
        <div class="first">
            <div id="nr_waimai" class="first_nr" @click="waimai">
                <div id="zi">
                    <span class="nr_span" id="span_waimai">外卖</span>
                </div>
                <div id="tu">
                    <div class="tu_waimai">
                    <!-- <span class="iconfont icon-tableware"></span> -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lengdongmiandian"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shaokaokaochuan"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyangzaocan"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuzhicaipin"></use>
                    </svg>
                </div>
                </div>
            </div>

            <div id="nr_diaoshang" class="first_nr" @click="dianshang">
                <div id="zi">
                    <span class="nr_span" id="span_diaoshang">电商</span>
                </div>
                <div id="tu">
                    <div class="tu_waimai">
                    <!-- <span class="iconfont icon-tableware"></span> -->
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinpinshangjia"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cuxiaoshangpin"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rouzhidongpin"></use>
                    </svg>
                </div>
                <div class="tu_waimai">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu"></use>
                    </svg>
                </div>
                </div>
            </div>
        </div>

        <!--第二层-->
        <div class="second">
            <div class="second_span">
                <div id="gongneng11" class="gongneng2" @click="baihuo">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-jiagongtiaoli"></use>
                        </svg>
                    </div>
                    <span>零食百货</span>
                </div>
                
                <div id="gongneng11" class="gongneng2" @click="shuiguo">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-shengxianshuiguo"></use>
                        </svg>
                    </div>
                    <span>生鲜水果</span>
                </div>
                
                <div id="gongneng11" class="gongneng2" @click="waimai">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-haixianshuichan"></use>
                        </svg>
                    </div>
                    <span>新鲜水产</span>
                </div>
            </div>

            <div class="second_span">
                <div id="gongneng11" class="gongneng2" @click="baihuo">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-remaituijian"></use>
                        </svg>
                    </div>
                    <span>热卖推荐</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="waimai">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-xinpinshangjia"></use>
                        </svg>
                    </div>
                    <span>新品上市</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="waimai">
                    <div class="topright"> 
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-gouwu"></use>
                        </svg>
                    </div>
                    <span>轻松购物</span>
                </div>
            </div>
        </div>

        <!--第三层-->
        <div class="third">
            <div class="waimai_dianpu" id="dianpu1" @click="dianpu1">
                <div class="third_tu">
                    <img src="../../../../assets/waimai/shuiguo1.jpg">
                </div>
                <div class="third_wenzi">
                    <div class="third_top" style="width:100%;height:40px;padding:3px 0px 0px 20px">
                        <p class="pp p1" ><strong>cbwef</strong></p>
                        <p class="pp p2" style="font-size: 3px;">&nbsp;4.1分&nbsp;&nbsp;&nbsp;&nbsp;月售812</p>
                    </div>
                    <div class="third_con" style="width:100%;height:40px;"> 
                        <div class="huore" style="width:20px;height:20px; margin: 0px 5px 2px 15px;float: left;">
                            <svg class="icon2" aria-hidden="true">
                                <use xlink:href="#icon-shaokaokaochuan"></use>
                            </svg>
                        </div>
                        <div class="third_con_zi" style="width:120px;height:15px;margin-top: 15px;">
                            <p class="p3" style="margin-top: 5px;">近期买过11次</p>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <div class="waimai_dianpu" id="dianpu2" @click="dianpu1">
                <div class="third_tu">
                    <img src="../../../../assets/waimai/shuiguo2.jpg">
                </div>
                <div class="third_wenzi">
                    <div class="third_top" style="width:100%;height:40px;padding:3px 0px 0px 20px">
                        <p class="pp p1" ><strong>水果水果</strong></p>
                        <p class="pp p2" style="font-size: 3px;">&nbsp;4.4分&nbsp;&nbsp;&nbsp;&nbsp;月售618</p>
                    </div>
                    <div class="third_con" style="width:100%;height:40px;"> 
                        <div class="huore" style="width:20px;height:20px; margin: 0px 5px 2px 15px;float: left;">
                            <svg class="icon2" aria-hidden="true">
                                <use xlink:href="#icon-shaokaokaochuan"></use>
                            </svg>
                        </div>
                        <div class="third_con_zi" style="width:120px;height:15px;margin-top: 15px;">
                            <p class="p3" style="margin-top: 5px;">近期买过1次</p>
                        </div>
                        
                    </div>
                    
                </div>
            </div>

            <div class="waimai_dianpu" id="dianpu3" @click="dianpu1">
                <div class="third_tu">
                    <img src="../../../../assets/waimai/shuiguo3.jpg">
                </div>
                <div class="third_wenzi">
                    <div class="third_top" style="width:100%;height:40px;padding:3px 0px 0px 20px">
                        <p class="pp p1" ><strong>鲜鲜果吧</strong></p>
                        <p class="pp p2" style="font-size: 3px;">&nbsp;4.8分&nbsp;&nbsp;&nbsp;&nbsp;月售439</p>
                    </div>
                    <div class="third_con" style="width:100%;height:40px;"> 
                        <div class="huore" style="width:20px;height:20px; margin: 0px 5px 2px 15px;float: left;">
                            <svg class="icon2" aria-hidden="true">
                                <use xlink:href="#icon-shaokaokaochuan"></use>
                            </svg>
                        </div>
                        <div class="third_con_zi" style="width:120px;height:15px;margin-top: 15px;">
                            <p class="p3" style="margin-top: 5px;">近期买过2次</p>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            
        </div>
    </div>

    <Footer/>

    </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Footer from '@/components/jiajv/waimai/waimai_footer.vue'
export default {
  name: 'shuiguo',
  components: {
    Top,
    Footer,
  },
  methods:{
        dianshang:function(){
            this.$router.replace('/waimai_dianshnag')
        },
        waimai:function(){
            this.$router.replace('/waimaidiaoshang')
        },
        baihuo:function(){
            this.$router.replace('/baihuo')
        },
        shuichuan:function(){
            this.$router.replace('/baihuo')
        },
        // 店铺
        dianpu1:function(){
            this.$router.replace('/dianpu1')
        }
    },
}
</script>

<style lang="less" scoped>
    /* 第一层 */
.first{
    width: 100%;
    height: 122px;
    text-align: center;
}
#tu{
    width: 160px;
    height: 60px;

    margin: auto;
    margin-top: 4px;
    display: flex;       
    justify-content: space-between;
    align-items:center;
}
.nr_span{
    font-size: 28px;
}
.first_nr{
    width: 50%;
    height: 125px;
    border: 1px border;
}
#nr_waimai{
    /* background-color: rgb(158, 158, 214); */
    float: left;
    background-color: rgb(245, 251, 248);
}
#nr_diaoshang{
    background-color: rgb(220, 237, 228);
    float: right;
}
#zi{
    margin-top: 15px;
}
.icon {//设置图标的大小
	       width: 2em; height: 2em;
	       vertical-align: -0.15em;
	       fill: currentColor;
	       overflow: hidden;
	    }

/* 第二层 */
.second{
    width: 100%;
    height: 215px;
    background-color: rgb(211, 236, 222);
}
.second_span{
    display: flex;                 ///！！！！！！
    justify-content: space-between; ///！！！！！！
    align-items: center;//垂直居中
    padding: 25px 25px 20px 13px;
}
.topright{
    padding-left: 22px;
    padding-right: 22px;
}
.icon1 {//设置图标的大小
	       width: 2.5em; height: 2.5em;
	       vertical-align: -0.15em;
	       fill: currentColor;
	       overflow: hidden;
	    }
span{
    margin-left: 10px;
}

/* 第三层 */
.third{
    width: 100%;
    height: 375px;
    padding-top: 20px;
    background-color: rgb(236, 249, 241);
    // height: 300px;
    // background-color: rgb(219, 192, 226);
}
.waimai_dianpu{
    width: 94%;
    margin: auto;
    background-color: #fff;
    height: 100px;
    border: 1px solid;
    margin-bottom: 20px;
    border-radius: 10px;
    
}
.third_tu{
    display: inline;
    width: 100px;
    height: 80px;
    float: left;
}
.third_wenzi{
    width: 185px;
    float: left;
    height: 80px;
    margin-top: 10px;
    margin-left: 45px;
    padding-left: 8px;
    background-color: rgb(236, 249, 241);
}
img{
    width: 100px;
    height: 80px;
    margin: 10px 10px 10px 20px;
    border-radius: 10px;
}
.icon2 {//设置图标的大小
	       width: 1em; height: 1em;
	       vertical-align: -0.15em;
	       fill: currentColor;
	       overflow: hidden;
	    }
.pp{
    font-size: 3px;
}
.p3{
    font-size: 1px;
}
</style>